<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta name="keywords" content="">
	    <meta name="description" content="">
	    <meta name="author" content="zhengliangquan,ozh.nextinside@gmail.com">
	    
		<title>layout2</title>
		<!--BASE CSS-->
		<link rel="stylesheet" href="css/base/base.css" />
		<link rel="stylesheet" href="css/base/responsive.css" />
		<!--STATE CSS-->
		<link rel="stylesheet" href="css/state/state.css" />
		<!--MODULE CSS-->
		<link rel="stylesheet" href="css/module/plugins/iconfont/iconfont.css" />
		<link rel="stylesheet" href="css/module/input.css" />
		<link rel="stylesheet" href="css/module/panel.css" />
		<link rel="stylesheet" href="css/module/modal.css" />
		<!--LAYOUT CSS-->
		<link rel="stylesheet" href="css/layout/header.css" />
		<link rel="stylesheet" href="css/layout/layout-template/layout2.css"/>
		
	</head>
	<body>
		<header id="header" class="bb">
			<div class="container p0_32">
				<div class="row clearfix">
						<!--logo-->
					<div class="column third logo text-align-left">
						<div class="logo-img bg-dark-green inline-block"></div>
						<h1 class="logo-name dark-green inline-block p0_15">蛋壳</h1>
					</div>
						<!--searchBox-->
					<div class="column third searchBox">
						<form action="" id="search" class="clearfix">
							<div class="column inline-block">
								<input type="text" placeholder="搜索关键词、App名称" class="search-area border"/>
								<i class="iconfont search-icon bg-dark-green p6_11">&#xe60c;</i>
							</div>
						</form>
					</div>
					
						<!--login-->
					<ul class="column third login text-align-right">
						<li class="fr">
							<!--logout-->
							<h5 class="logout-area dark-gray is-hidden">
								<a href="#">登录/注册</a>
							</h5>
							<!--login-->
							<img class="login-area p16_0" src="img/default_avatar.png"/>
							<!--Menu-->
							<ul class="main-menu border text-align-left is-hidden">
								<li class="bb"><a href="#">我喜欢的截图</a></li>
								<li class="bb"><a href="#">我订阅的APP</a></li>
								<li class="bb"><a href="#">个人设置</a></li>
								<li class="bb"><a href="#">标签管理</a></li>
								<li class="bb"><a href="#">APP截图管理</a></li>
								<li class="bb"><a href="#">用户管理</a></li>
								<li class="bb"><a href="#">权限管理</a></li>
								<li><a href="#">退出登录</a></li>
							</ul>
						</li>
						<li class="fr">
							<h4 class="faq dark-gray">
								<a href="#">FAQ</a>
							</h4>
						</li>
					</ul>
				</div>
			</div>
		</header>
		
		<div id="main-content" class="main-content">
			<div class="container p0_32 columu text-align-center">
				<div class="row clearfix">
					<!--PANEL-->
					<div class="panel column">
						<div class="row panel-header p20_0 clearfix">
							<div class="column half text-align-left">
								<h4 class='panel-title'>权限管理</h4>
							</div>
							<div class="column half text-align-right" >
								<a class="btn bg-dark-green inline-block" id='add'>
									添加管理员级别
								</a>
								<!--MODAL-->
								<div class="modal text-align-center is-hidden">
									<div class="modal-header p0_30">
										<h5 class="modal-title text-align-left">请输入信息</h5>
									</div>
									<div class="modal-body">
										
									</div>
									<div class="modal-footer">
										<input type="submit" class="btn bg-dark-green" value="确认"/>
										<input type="reset" class="btn border-btn" value="取消"/>
									</div>
								</div>
								<!--MODAL-BACKGROUND-->
								<div class="modal-background is-hidden"></div>
							</div>
						</div>
						<div class="row panel-body">
							<table class="column border">
								<tr class="row clearfix bb">
									<td class="column half text-align-left">
										<h4>超级管理员</h4>
										<h5 class="level light-gray">Level 1</h5>							
									</td>
									<td class="column half text-align-right">
										<a class="btn inline-block border-btn" href="#">
											配置权限
										</a>
									</td>
								</tr>
								<tr class="row clearfix bb">
									<td class="column half text-align-left">
										<h4>普通管理员</h4>
										<h5 class="level light-gray">Level 2</h5>							
									</td>
									<td class="column half text-align-right">
										<a class="btn inline-block border-btn" href="#">
											配置权限
										</a>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<footer id="footer" class="footer text-align-center">
			版权
		</footer>
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#add").click(function(){
					$('.modal,.modal-background').show();
				});
				$(document).on('click','.modal-background,.modal-footer input[type="reset"]',function(){
					$('.modal,.modal-background').hide();
				});
			})
		</script>
	</body>
</html>